<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Largest Contentful Paint: largest text is reported.</title>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css">
#text2 {
  position: absolute;
  width: auto;
  white-space: nowrap;
}
</style>
<!-- There is some text and some tiny images. We care about the largest text. -->
<img src='/images/green-1x1.png'/>
<div id='text1'>This is some text.</div>
<div id='text2'>This is more text so it will be the Largest Contentful Paint!</div>
<img src='/images/green-2x2.png'/>
<script>
  async_test(function (t) {
    assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
    let beforeRender;
    const observer = new PerformanceObserver(
      t.step_func(entryList => {
        entryList.getEntries().forEach(entry => {
          // The tiny images or text1 could be reported as LCP if it is rendered before text2.
          if (entry.id !== 'text2')
            return;

          assert_equals(entry.entryType, 'largest-contentful-paint');
          assert_greater_than_equal(entry.renderTime, beforeRender);
          assert_greater_than_equal(performance.now(), entry.renderTime);
          assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
          assert_equals(entry.duration, 0);
          const div = document.getElementById('text2');
          // The div styling makes it approximate the text size.
          assert_greater_than_equal(entry.size, (div.clientHeight - 5) * (div.clientWidth - 5));
          assert_less_than_equal(entry.size, (div.clientHeight + 1) * (div.clientWidth + 1));
          assert_equals(entry.loadTime, 0);
          assert_equals(entry.id, 'text2');
          assert_equals(entry.url, '');
          assert_equals(entry.element, div);
          t.done();
        })
      })
    );
    observer.observe({type: 'largest-contentful-paint', buffered: true});
    beforeRender = performance.now();
  }, 'Largest Contentful Paint: largest text is reported.');
</script>
</body>
